<template>
  <div class="dashboard-editor-container">

    <el-row :gutter="20">
      <el-col :span="9">
        <div class="grid-content bg-purple" style="overflow: hidden;">

        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple line1-bg" :style="y_fw">
          <span class="line2-span">今日使用搜索人数</span>
          <span class="line2-span2">{{ todayNum }}</span>
          <span class="line2-span3">总使用人数</span>
          <span class="line2-span2">{{ allNum }}</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple line1-bg" :style="y_sb">
          <span class="line2-span">今日热搜词</span>
          <span class="line2-span4" style="margin-top: 35px;font-size: larger;margin-left: 20%">{{ hotWords }}</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple line1-bg" :style="y_bg">

<!--          <WebSocket></WebSocket>-->
          <span class="line2-span">已关联同步总数据</span>
          <span class="line2-span4" style="margin-top: 25px;font-size: xx-large;margin-left: 30%">{{ allCountNum }}条</span>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="25">
      <el-col style="width: 20%">
        <div class="grid-content bg-purple line1-bg" :style="qksl">
          <span class="line2-span">期刊数据量</span>
          <span class="line2-span4" style="margin-top: 25px;font-size: xx-large;margin-left: 40%">{{ qkNum }}条</span>
        </div>
      </el-col>
      <el-col style="width: 20%">
        <div class="grid-content bg-purple line1-bg" :style="tssl">
          <span class="line2-span">图书数据量</span>
          <span class="line2-span4" style="margin-top: 25px;font-size: xx-large;margin-left: 40%">{{ tsNum }}条</span>
        </div>
      </el-col>
      <el-col style="width: 20%">
        <div class="grid-content bg-purple line1-bg" :style="wwsl">
          <span class="line2-span">外文数据量</span>
          <span class="line2-span4" style="margin-top: 25px;font-size: xx-large;margin-left: 40%">{{ engineerenNum }}条</span>
        </div>
      </el-col>
      <el-col style="width: 20%">
        <div class="grid-content bg-purple line1-bg" :style="bzsl">
          <span class="line2-span">标准数据量</span>
          <span class="line2-span4" style="margin-top: 25px;font-size: xx-large;margin-left: 40%">{{ bzNum }}条</span>
        </div>
      </el-col>
      <el-col style="width: 20%">
        <div class="grid-content bg-purple line1-bg" :style="qtsl">
          <span class="line2-span">其他数据量</span>
          <span class="line2-span4" style="margin-top: 25px;font-size: xx-large;margin-left: 40%">{{ qtNum }}条</span>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="25">
      <el-col style="width: 60%">
        <div class="grid-content bg-purple" style="height: 340px; overflow: hidden;">
          <div style="display: flex; justify-content: space-between;">
            <span style="margin-left: 25px;margin-top: 10px;color: rgb(24, 144, 255);">期刊类别</span>
          </div>
          <div class="chart-wrapper">
            <bar-chart />
          </div>
        </div>
      </el-col>
      <el-col style="width: 40%">
        <div class="grid-content bg-purple">
          <div style="display: flex; justify-content: space-between;">
            <span style="margin-left: 25px;margin-top: 10px;color: rgb(24, 144, 255);">出版社类别</span>
          </div>
          <div class="chart-wrapper">
            <pie-chart />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="25">
      <el-col style="width: 100%">
        <div class="grid-content bg-purple">
          <div style="display: flex; justify-content: space-between;">
            <span style="margin-left: 25px;margin-top: 10px;color: rgb(24, 144, 255);">热搜排行榜</span>
          </div>
          <div>
            <line-chart />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//import WebSocket from '@/components/WebSocket/WebSocket'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import {mapGetters} from "vuex";
import { getLastLoginTime } from "@/api/login";
import { getUserProfile } from "@/api/system/user";
import { getSearchHotTopToday, getNowUserNum, getAllUserNum, getBaoNum, getQkNum, getEngineerenNum, getTsNum, getRmgbNum, getTyzbbzbzNum, getAllNum } from "@/api/hotsearch/index";


export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
    //WebSocket
  },
  data() {
    return {
      lastTime:null,
      todayNum:0,
      allNum:0,
      hotWords:'',
      postGroup: {},
      qkNum:0,
      tsNum:0,
      engineerenNum:0,
      bzNum:0,
      qtNum:0,
      allCountNum:0,
      user: {
      },
      hotNum : {
        num : 3
      },
      y_fw:{
        backgroundImage: "url(" + require("../assets/images/index/hyyh1.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        width: "100%",
      },
      y_sb:{
        backgroundImage: "url(" + require("../assets/images/index/hyyh2.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        width: "100%",
      },
      y_bg:{
        backgroundImage: "url(" + require("../assets/images/index/hyyh3.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        width: "100%",
      },
      qksl:{
        backgroundImage: "url(" + require("../assets/images/index/01.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        width: "100%",
      },
      tssl:{
        backgroundImage: "url(" + require("../assets/images/index/02.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        width: "100%",
      },
      wwsl:{
        backgroundImage: "url(" + require("../assets/images/index/03.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        width: "100%",
      },
      bzsl:{
        backgroundImage: "url(" + require("../assets/images/index/04.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        width: "100%",
      },
      qtsl:{
        backgroundImage: "url(" + require("../assets/images/index/05.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        width: "100%",
      },
      notes:[
        "要使整个人生都过得舒适、愉快，这是不可能的，因为人类必须具备一种能应付逆境的态度。——卢梭",
        "只有把抱怨环境的心情，化为上进的力量，才是成功的保证。——罗曼·罗兰",
        "学问是异常珍贵的东西，从任何源泉吸收都不可耻。——阿卜·日·法拉兹",
        "书籍把我们引入最美好的社会，使我们认识各个时代的伟大智者。——史美尔斯",
        "少而好学，如日出之阳；壮而好学，如日中之光；志而好学，如炳烛之光。——刘向",
        "人生就是学校。在那里，与其说好的教师是幸福，不如说好的教师是不幸。——海贝尔",
        "书籍把我们引入最美好的社会，使我们认识各个时代的伟大智者。——史美尔斯",
        "今天应做的事没有做，明天再早也是耽误了。——裴斯泰洛齐",
        "既然我已经踏上这条道路，那么，任何东西都不应妨碍我沿着这条路走下去。——康德",
        "家庭成为快乐的种子在外也不致成为障碍物但在旅行之际却是夜间的伴侣。——西塞罗",
        "一个人来说，所期望的不是别的，而仅仅是他能全力以赴和献身于一种美好事业。——爱因斯坦",
      ],
    }
  },
  created() {
    this.getUser();
    this.getLastTime();
    this.getTodayUser();
    this.getAllUser();
    this.getHotTop();
    this.getQkCount();
    this.getTsCount();
    this.getEngineerenCount();
    this.getBzcount();
    this.getQtCount();
    this.getAllCount();
  },
  computed: {
    ...mapGetters([
      'avatar'
    ]),
    noteNum(){
      return this.notes[this.selectFrom(0, this.notes.length-1)];
    },
  },
  methods: {
    selectFrom(minValue,maxValue){
      let num = maxValue - minValue + 1;
      return Math.floor(Math.random()*num + minValue);
    },
    getTimeState(){
      // 获取当前时间
      let timeNow = new Date();
      // 获取当前小时
      let hours = timeNow.getHours();
      // 设置默认文字
      let state= ``;
      // 判断当前时间段
      if (hours >= 0 && hours <= 10) {
        state = `早上好!`;
      } else if (hours > 10 && hours <= 14) {
        state= `中午好!`;
      } else if (hours > 14 && hours <= 18) {
        state= `下午好!`;
      } else if (hours > 18 && hours <= 24) {
        state= `晚上好!`;
      }
      return state;
    },
    //用户基本信息
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.postGroup = response.postGroup;
      });
    },
    //最近登录时间
    getLastTime() {
      getLastLoginTime().then(response => {
        this.lastTime = response.msg;
      });
    },
    //获取今日搜索使用人数
    getTodayUser() {
      getNowUserNum().then(response => {
        this.todayNum = response.data;
      });
    },
    //总使用人数
    getAllUser() {
      getAllUserNum().then(response => {
        this.allNum = response.data;
      });
    },
    //获取热搜词信息
    getHotTop() {
      getSearchHotTopToday(this.hotNum).then(response => {
        if(response.data.length > 0){
          let data = response.data;
          for (let i in data) {
            let v = data[i];
            if(i < data.length - 1){
              this.hotWords += v.hotword + "、"
            }else{
              this.hotWords += v.hotword
            }
          }
        }
      });
    },
    //获取期刊数量
    getQkCount() {
      getQkNum().then(response => {
        this.qkNum = response.msg;
      });
    },
    //获取图书数量
    getTsCount() {
      getTsNum().then(response => {
        this.tsNum = response.msg;
      });
    },
    //获取外文数量
    getEngineerenCount() {
      getEngineerenNum().then(response => {
        this.engineerenNum = response.msg;
      });
    },
    //获取标准数量
    getBzcount() {
      getTyzbbzbzNum().then(response => {
        this.bzNum = response.msg;
      });
    },
    //其他数量
    getQtCount() {
      var baoNum = 0;
      getBaoNum().then(response => {
        baoNum = baoNum * 1 +  response.msg * 1;
      });
      getRmgbNum().then(response => {
        baoNum = baoNum * 1 +  response.msg * 1;
        this.qtNum=baoNum;
      });
    },
    //所有条目数
    getAllCount() {
      getAllNum().then(response => {
        this.allCountNum = response.data;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
<style lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #ffffff;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 160px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 0 16px;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  .line1-bg {
    border-radius: 15px;
    color: white;
  }
  .line2-span {
    margin-top: 25px;
    display: inline-block;
    margin-left: 35px;
  }
  .line2-span2{
    font-weight: 600;
    display: block;
    font-weight: 600;
    margin-left: 35px;
    margin-top: 10px;
    font-size: 22px;
  }
  .line2-span3{
    display: inline-block;
    margin-left: 35px;
    margin-top: 15px;
  }
  .line2-span4{
    display: block;
    margin-left: 35px;
    margin-top: 8px;
  }
  .line3-div{
    padding-top: 45px;
    padding-left: 45px;
  }
</style>
